<template>
  <video-box class="flex w-full h-full bg-slate-200 rounded-lg overflow-hidden">
    <video-player :videoToView="videoInfo"></video-player>
  </video-box>
  <exchange-box
    v-if="!id"
    class="w-12 h-28 bg-slate-200 ml-2 rounded-lg md:block hidden"
  >
    <exchang-svg-box class="exchang-svg-box"
      ><div @click="toLastVideo">
        <svg
          t="1698288205183"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5155"
          width="24"
          height="24"
        >
          <path
            d="M838.116 732.779 877.7 693.195 511.979 327.549 146.3 693.195 185.883 732.779 512.003 406.652Z"
            p-id="5156"
          ></path>
        </svg></div
    ></exchang-svg-box>
    <exchang-svg-box class="exchang-svg-box"
      ><div @click="toNextVideo">
        <svg
          t="1698288216830"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6139"
          width="24"
          height="24"
        >
          <path
            d="M185.884 327.55 146.3 367.133 512.021 732.779 877.7 367.133 838.117 327.55 511.997 653.676Z"
            p-id="6140"
          ></path>
        </svg></div
    ></exchang-svg-box>
  </exchange-box>
</template>

<script setup>
import { reactive, ref } from "vue";
import VideoPlayer from "../components/VideoPlayer.vue";
import { useRoute } from "vue-router";
import { getVideoByIdAPI, getVideoRandomAPI } from "@/http/api/video";
import _cloneDeep from "lodash/cloneDeep";
const route = useRoute();

const { id } = route.params;
let videoInfo = reactive({
  info: null,
});
let videoInfos = ref([]);
let pos = ref(0);

if (id) {
  getVideoByIdAPI(id).then((res) => {
    console.log(res);
    if (res.code === 200) {
      videoInfo.info = _cloneDeep(res.data);
    } else
      ElMessage({
        message: res.message,
        type: "warning",
      });
  });
} else {
  getVideoRandomAPI().then((res) => {
    if (res.code === 200) {
      videoInfos.value.push(res.data);
      videoInfo.info = _cloneDeep(res.data);
    } else
      ElMessage({
        message: res.message,
        type: "warning",
      });
  });
}

function toLastVideo() {
  if (pos.value === 0) {
    ElMessage({
      message: "前面没有视频啦！",
      type: "warning",
    });
    return;
  }
  pos.value--;
  videoInfo.info = _cloneDeep(videoInfos.value[pos.value]);
}
function toNextVideo() {
  if (pos.value <= videoInfos.value.length - 1) {
    getVideoRandomAPI().then((res) => {
      if (res.code === 200) {
        videoInfos.value.push(res.data);
        pos.value++;
        videoInfo.info = _cloneDeep(videoInfos.value[pos.value]);
        console.log(videoInfo.info);
      } else
        ElMessage({
          message: res.message,
          type: "warning",
        });
    });
  }

  // videoInfo.info = _cloneDeep(videoInfos.value[pos.value]);
}
</script>

<style lang="scss" scoped>
.exchang-svg-box {
  display: flex;
  height: 50%;
  justify-content: center;
  align-items: center;
  div {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    width: 1.7rem;
    height: 1.7rem;
    &:hover {
      background: gray;
      svg {
        fill: #fff;
      }
    }
    svg {
      fill: var(--svg-color);
    }
  }
}
</style>